<template>
  <div class="pageIndex">
    <!--焦点图-->
    <bannerList :pageData="pageData"></bannerList>
    <!--为什么选择我们-->
    <div class="pageContainer">
      <whyUs :pageData="pageData"></whyUs>
    </div>

    <!--解决方案-->
    <div class="pageContainer">
      <dealMethods :pageData="pageData"></dealMethods>
    </div>

    <!--新闻中心-->
    <div class="pageContainer">
      <newsCenter :pageData="pageData"></newsCenter>
    </div>

    <!--合作品牌-->
    <div class="pageContainer" style="padding-bottom: 3vw">
      <cooperationBrand :pageData="pageData"></cooperationBrand>
    </div>
  </div>

</template>

<script setup>
  import {ref, onMounted} from 'vue'
  import bannerList from './bannerList.vue'
  import whyUs from './whyUs.vue'
  import dealMethods from './dealMethods.vue'
  import newsCenter from './newsCenter.vue'
  import cooperationBrand from './cooperationBrand.vue'
  import {apiGetIndexInfo} from '@/api/index.js'
  import {useLocaleStore} from '../../store/locales.js'

  const useLocale = useLocaleStore()
  const pageData = ref({
    baseDto: {},
    lightSpotContentDtoList: [],
    bannerList: [],
    solvePlanContents: [],
    newsContentDtoList: []
  })
  onMounted(() => {
    apiGetIndexInfo({}).then((res) => {
      pageData.value = res
      pageData.value.hospitalPartnerList = [...res.hospitalPartnerList, ...res.hospitalPartnerList]
      useLocale.setMenuList(res.menuList)
    })
  })
</script>

<style scoped lang="scss">
  @media screen and (max-width: 1079px) {

  }

  @media screen and (min-width: 1080px) {

  }
</style>
